<template>
	<view>
		<view class="chooseBox">
			<u-subsection :list="subsection_list" :current="curNow" buttonColor="#ffffff" bg-color="#ffffff"
				active-color="rgba(255, 87, 51, 1)" inactive-color="#808080" height="78" @change="setlistChange()">
			</u-subsection>
		</view>
		<u-swipe-action v-for="(item,index) in dateline" :index="index" :key="item.brUuid" :show="item.show"
			@open="open" @click="click" :options="options">
			<footpoint :details="item" v-if="curNow == 0"></footpoint>
		</u-swipe-action>
		<u-swipe-action v-for="(item,index) in dateneedline" :index="index" :key="item.brUuid" :show="item.show"
			@open="open" @click="clickneed" :options="options">
			<footpointNeed :details="item" v-if="curNow == 1"></footpointNeed>
			</u-swipe-action>
		<!-- <view  v-for="(item,index) in dateline"  :key="index">
			<footpoint :details="item"></footpoint>
		</view> -->
		<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
	</view>
</template>

<script>
	import footpoint from '../../components/footpoint/footpoint.vue'
	import footpointNeed from '../../components/footpoint/footpointNeed.vue'
	export default {
		components: {
			footpoint,
			footpointNeed
		},
		data() {
			return {
				scrollTop: 0,
				curNow: 0,
				show: false,
				mode: 'date',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				subsection_list: [{
						name: '商品' //0,1
					},
					{
						name: '需求' //2
					}
				],
				dateline: [],
				dateneedline: []
			}
		},
		mounted() {
			this.getdata();
			this.getneeddata();
		},

		methods: {
			click(index, index1) {
				let uuid = this.dateline[index].brUuid
				this.canceldata(uuid).then(res => {
					if (res.data.code == 200) {
						this.dateline.splice(index, 1);
					}
				})
			},
			clickneed(index, index1) {
				let uuid = this.dateneedline[index].brUuid
				this.canceldata(uuid).then(res => {
					if (res.data.code == 200) {
						this.dateneedline.splice(index, 1);
					}
				})
			},
			setlistChange(index) {
				this.curNow = index;
				if (this.dateline.length == 0) {
					this.getdata();
					this.getneeddata();
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.dateline[index].show = true;
				this.dateline.map((val, idx) => {
					if (index != idx) this.dateline[idx].show = false;
				})
			},
			canceldata(uuid) {
				let iurl = '/browse-records/delBrowseRecords';
				let data = {
					brUuId: uuid,
				};
				return this.$myRequest({
					url: iurl,
					method: 'POST',
					data: data,
				})
			},
			async getdata() {
				const res = await this.$myRequest({
					url: '/browse-records/findMyBrowseGoodsList',
					method: 'POST',
					data: {
						pageNum: 0,
						pageSize: 10,
						'show': this.show,
					},
				}).then(res => {
					if (res.data.code === 200) {
						this.dateline = res.data.data.records
					}
					let show = res.data.data.records;
					show.map((item) => {
						item.show = '';
						return item
					})
				})
			},
			async getneeddata() {
				let aurl = '/browse-records/findMyBrowseDemandList'
				const res = await this.$myRequest({
					url: aurl,
					method: 'POST',
					data: {
						pageNum: 0,
						pageSize: 10,
						'show': this.show,
					},
				}).then(res => {
					if (res.data.code === 200) {
						this.dateneedline = res.data.data.records;
						// this.dateline.map((item) => {
						// 	item.show = '';
						// 	return item
						// })
					}
					let show = res.data.data.records;
					show.map((item) => {
						item.show = '';
						return item
					})
				})
			},
			change(e) {
				console.log(e);
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			}

		}
	}
</script>

<style>
	.fp_info {
		background-color: rgba(255, 255, 255, 1);
	}

	.fp_item {
		background-color: rgba(255, 255, 255, 1);
	}

	.date {
		font-size: 28rpx;
		color: rgba(112, 112, 112, 1);
		position: relative;
		left: 33rpx;
		top: 20rpx;
		width: 140rpx;
		height: 50rpx;
	}

	.fp_imainfo {
		position: relative;
		left: 11rpx;
		top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.fp_ima {

		width: 200rpx;
		height: 210rpx;
		margin-left: 32rpx;
	}
</style>
